<!doctype html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <title>HTML5 Push Notifications using Pusher</title>
    
    <link rel="stylesheet/less" type="text/css" href="lib/twitter-bootstrap/lib/bootstrap.less">
    <script src="lib/less/less-1.1.5.min.js"></script>
    
    <link href="styles.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="../src/lib/gritter/css/jquery.gritter.css" />
    
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="../src/lib/gritter/js/jquery.gritter.js"></script>
    <script src="http://js.pusher.com/1.12/pusher.min.js"></script>
    <script src="../src/PusherNotifier.js"></script>
    
    <script>
      $(function() {
        var NOTIFY_ENDPOINT = "php/notify.php";
        var pusher = new Pusher('13d8b450fe93bb09192f');
        var channel = pusher.subscribe('my_notifications');
        var notifier = new PusherNotifier(channel);
       
        $("button#notifyBtn,a#notify").click(function() {
          var storyId = $.trim($("#storyId").val());
          if( storyId == '' ) {
             $("#storyId").focus();
             return false;
          }
          var message = $.trim($("#notifyMessage").val());
          if( message == '' ) {
             $("#notifyMessage").focus();
             return false;
          }
          $.ajax( { url: NOTIFY_ENDPOINT, data: { "message": message, 'story' : storyId } } );
          $("#notifyMessage").val( '' );
        });
        
      });
    </script>
  </head>
  <body>
     <div id="notificationDiv" style="text-align:left;padding:10px;"></div>
     <div style="text-align:left ;padding:30px;">
        <input type="text" value='' id="storyId" name="storyId"  /><br />
        <textarea id="notifyMessage" Placeholder="please enter the message" style="width:500px;"></textarea><br /><br />
        <div>
          <button class="btn info" id="notifyBtn">Notify</button>
        </div>
     </div> 
  </body>
</html>